<template>
	<view class="component-userinfo">
		<view class="headimg flex-center">
			<image mode="widthFix" class="headimg__img" :src="(userinfo&&userinfo.headimg!=undefined)?userinfo.headimg:logo"></image>
		</view>
		<view class="nickname">
			<view>
				{{(userinfo&&userinfo.nickname!=undefined)?userinfo.nickname:'未登录'}}
			</view>
			<view v-if="(userinfo&&userinfo.is_vip!=undefined)" class="vip" :style="userinfo.is_vip==1?'color:#FFC200;':'color:#b5b5b5;'">
				{{userinfo.is_vip==1?'永久会员':'普通用户'}}
			</view>
			<view v-else class="vip" style="color: #b5b5b5;" @click="showLogin" v-if="!userinfo">
				点击登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fy-userinfo",
		props:{
			userinfo:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				logo:require("@/static/images/logo.png")
			};
		},
		methods:{
			showLogin(){
				this.$emit("showLogin");
			}
		}
	}
</script>

<style scoped lang="scss">
	.component-userinfo {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.headimg {
			margin-top: 80px;
			height:70px;
			width: 70px;
			&__img {
				width: 70px;
				height:70px;
				border-radius: 50%;
			}
		}
		.nickname {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 14px;
			margin-top: 1em;
			color:#FFF;
			.vip {
				margin-top: .5em;
				padding:5px 10px;
				border-radius: 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				background:url('/static/images/vip_card.png');
				background-size: cover;
				font-size: 12px;
			}
		}
	}
</style>